<template>
    <div>
        <header><h1 class="title">贵州省学生营养餐智慧云+校农结合大数据</h1></header>
        <div  class="content-box">
            <aside class="left">
                <farming></farming>
                <food></food>
                <distributor></distributor>
            </aside>
            <aside class="right">
                <supply></supply>
                <farmRatio></farmRatio>
                <cooperative></cooperative>
            </aside>
            <section>
                <div class="total-box">
                    <total></total>
                </div>
                <div class="map-svg">
                    <!--<img :src="mapbg">-->
                        <component @changeData="changeData" :is="currentMapComponent"></component>
                </div>
                <div class="bottom">
                    <bottomTotal :bottomTitle="$store.state.bottomTitle"></bottomTotal>
                </div>
            </section>
        </div>
    </div>
</template>
<script>
    import mapbg from '@/assets/images/map-bg.png'  //农业数据统计
    import farming from '@/components/farming'  //农业数据统计
    import food from '@/components/food'        //食谱食材用量统计
    import distributor from '@/components/distributor'  //本年全省交易曲线图
    import supply from '@/components/supply'       //各地区各分类交易额统计图
    import cooperative from '@/components/cooperative'   //各区县校企农数据统计
    import total from '@/components/total'   //总金额，年、月、日
    import maptrsvg from '@/components/maptrsvg'   //铜仁时地图
    import mapbjsvg from '@/components/mapbjsvg'   //毕节市地图
    import maplpssvg from '@/components/maplpssvg'   //六盘水市地图
    import mapqdnzsvg from '@/components/mapqdnzsvg'   //黔东南州地图
    import mapzysvg from '@/components/mapzysvg'   //遵义市地图
    import bottomTotal from '@/components/bottomTotal'   //底部
    import farmRatio from '@/components/farmRatio'   //底部

    export default {
        name:'city',
        components: {
            farming,
            food,
            distributor,
            supply,
            cooperative,
            total,
            maptrsvg,
            mapbjsvg,
            maplpssvg,
            mapqdnzsvg,
            mapzysvg,
            bottomTotal,
            farmRatio
        },
        props: {
        },
        data () {
            return {
                mapbg,
                currentMapComponent:'',
                bottomTitle:''
            }
        },
        computed: {
        },
        methods: {
            changeData(e){
                this.$store.state.bottomTitle=e;
                console.log(this.$store.state.bottomTitle)
            },
            init(){
                let _this=this;
                let ID= this.$route.query.id.toString();//强制转换为string类型，防止路由后时query参数会自动转化为string类型是会出错

//                当 当前查询id变化时，初始化store的currentCounty、bottomTitle的值
                if(this.$store.state.currentID!==ID){
                    this.$store.state.currentID=ID;
                    this.$store.state.currentCounty='';
                    switch (ID){
                        case '0':
                            _this.$store.state.bottomTitle='bjq';
                            break;
                        case '1':
                            _this.$store.state.bottomTitle='zyx';
                            break;
                        case '2':
                            _this.$store.state.bottomTitle='za';
                            break;
                        case '3':
                            _this.$store.state.bottomTitle='lz';
                            break;
                        case '4':
                            _this.$store.state.bottomTitle='js';
                            break;
                    }
                }
//                进入当前路由，初始化应用组件
                 switch (ID){
                    case '0':
                        _this.currentMapComponent='maptrsvg';
                        break;
                    case '1':
                        _this.currentMapComponent='mapqdnzsvg';
                        break;
                    case '2':
                        _this.currentMapComponent='mapzysvg';
                        break;
                    case '3':
                        _this.currentMapComponent='maplpssvg';
                        break;
                    case '4':
                        _this.currentMapComponent='mapbjsvg';
                        break;
                }
            }
        },
        mounted () {
//            console.log(this.$route.meta.keepAlive);

            this.init()
        },
        created(){
            console.log('created');
//            this.init()
        }
    }

</script>
<style type="text/css">
</style>